<template>
  <div style="width: 100%">
    <a-button slot="title" @click="$router.back()" type="link" icon="arrow-left" title="返回上一级">返回上一级</a-button>
    <div class="all-main">
      <div class="user-info">
        <a-avatar @click="seeUserInfo(blogInfo.user ? blogInfo.user.userId:undefined)" class="avator cursor" title="查看主页" :src="blogInfo.user ? blogInfo.user.avatar : ''"/>
        <span @click="seeUserInfo(blogInfo.user ? blogInfo.user.userId:undefined)" class="uname cursor">{{blogInfo.user ? blogInfo.user.userName : ''}}</span>
        <span>
          <a-tag class="cursor" v-for="tag in blogInfo.user ? blogInfo.user.rankList : []" :key="tag.rankName" :color="tag.rankColor">
            {{tag.rankName}}
          </a-tag>
        </span>
      </div>
      <div class="main-info">
        <div class="main-title" title="标题">{{blogInfo.blogTitle}}</div>
        <div class="main-content" v-html="blogInfo.blogContent">

        </div>
        <div class="main-footer">
          <span v-if="blogInfo.isNiu === 1" style="cursor: pointer" title="点赞总数" @click="addNiu(blogInfo.blogId)">
              <a-icon type="like-o" style="color: red"/> {{blogInfo.blogNiu}}
            </span>
          <span v-else style="cursor: pointer" title="点赞总数" @click="addNiu(blogInfo.blogId)">
              <a-icon type="like-o"/> {{blogInfo.blogNiu}}
          </span>

          <a-divider type="vertical"/>
          <span style="cursor: pointer" title="评论" @click="showCommentModal('blog',blogInfo.user)">
              <a-icon type="message"/> {{blogInfo.commentList ? blogInfo.commentList.length : 0}}
          </span>
          <a-divider type="vertical" />
          <span>
              {{$moment(blogInfo.blogPushTime).format('yyyy-MM-DD HH:mm:ss')}} 发布
            </span>
          <a-divider type="vertical" />
          <a-tag class="cursor"  v-for="i in blogInfo.blogTags" :key="i">{{i}}</a-tag>
        </div>
      </div>
      <div class="comment-info">
        <a-comment v-for="item in blogInfo.commentList ? blogInfo.commentList : []" :key="item.commentId">
          <span slot="actions" key="comment-nested-reply-to" @click="showCommentModal('repeat',item)">回复他</span>
          <a slot="author"
             @click="$router.push({name: 'userinfo',params:{userId:$encry(item.wuser ? item.wuser.userId : '')}})">
            {{ item.wuser ? item.wuser.userName : '' }}
          </a>
          <a-avatar
              slot="avatar"
              :src="item.wuser ? item.wuser.avator : ''"
              :alt="item.wuser ? item.wuser.userName : ''"
              @click="$router.push({name: 'userinfo',params:{userId:$encry(item.wuser ? item.wuser.userId : '')}})"
          />
          <p slot="content">
            {{item.commnetContent}}
            <a-button
                v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                @click="removeComment(item.commentId)"
                type="danger" size="small" ghost icon="close" shape="circle"/>
          </p>
<!--          二级-->
          <a-comment v-for="item2 in item.children ? item.children : []" :key="item2.commentId">
            <span slot="actions" @click="showCommentModal('repeat',item2)">回复他</span>
            <a slot="author"
               @click="$router.push({name: 'userinfo',params:{userId:$encry(item2.wuser ? item2.wuser.userId : '')}})"
            >{{ item2.wuser ? item2.wuser.userName : '' }}</a>
            <a-avatar
                slot="avatar"
                :src="item2.wuser ? item2.wuser.avator : ''"
                :alt="item2.wuser ? item2.wuser.userName : ''"
                @click="$router.push({name: 'userinfo',params:{userId:$encry(item2.wuser ? item2.wuser.userId : '')}})"
            />
            <p slot="content">
              {{item2.commnetContent}}
              <a-button
                  v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                  @click="removeComment(item2.commentId)"
                  type="danger" size="small" ghost icon="close" shape="circle"/>
            </p>
<!--            三级-->
            <a-comment v-for="item3 in item.children ? item2.children : []" :key="item3.commentId">
              <span slot="actions" @click="showCommentModal('repeat',item3)">回复他</span>
              <a slot="author"
                 @click="$router.push({name: 'userinfo',params:{userId:$encry(item3.wuser ? item3.wuser.userId : '')}})"
              >{{ item3.wuser ? item3.wuser.userName : '' }}</a>
              <a-avatar
                  slot="avatar"
                  :src="item3.wuser ? item3.wuser.avator : ''"
                  :alt="item3.wuser ? item3.wuser.userName : ''"
                  @click="$router.push({name: 'userinfo',params:{userId:$encry(item3.wuser ? item3.wuser.userId : '')}})"
              />
              <p slot="content">
                {{item3.commnetContent}}
                <a-button
                    v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                    @click="removeComment(item3.commentId)"
                    type="danger" size="small" ghost icon="close" shape="circle"/>
              </p>

<!--            四级-->
              <a-comment v-for="item4 in item.children ? item3.children : []" :key="item4.commentId">
                <span slot="actions" @click="showCommentModal('repeat',item4)">回复他</span>
                <a slot="author"
                   @click="$router.push({name: 'userinfo',params:{userId:$encry(item4.wuser ? item4.wuser.userId : '')}})"
                >{{ item4.wuser ? item4.wuser.userName : '' }}</a>
                <a-avatar
                    slot="avatar"
                    :src="item4.wuser ? item4.wuser.avator : ''"
                    :alt="item4.wuser ? item4.wuser.userName : ''"
                    @click="$router.push({name: 'userinfo',params:{userId:$encry(item4.wuser ? item4.wuser.userId : '')}})"
                />
                <p slot="content">
                  {{item4.commnetContent}}
                  <a-button
                      v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                      @click="removeComment(item4.commentId)"
                      type="danger" size="small" ghost icon="close" shape="circle"/>
                </p>

<!--            五级-->
                <a-comment v-for="item5 in item.children ? item4.children : []" :key="item5.commentId">
                  <span slot="actions" @click="showCommentModal('repeat',item5)">回复他</span>
                  <a slot="author"
                     @click="$router.push({name: 'userinfo',params:{userId:$encry(item5.wuser ? item5.wuser.userId : '')}})"
                  >{{ item5.wuser ? item5.wuser.userName : '' }}</a>
                  <a-avatar
                      slot="avatar"
                      :src="item5.wuser ? item5.wuser.avator : ''"
                      :alt="item5.wuser ? item5.wuser.userName : ''"
                      @click="$router.push({name: 'userinfo',params:{userId:$encry(item5.wuser ? item5.wuser.userId : '')}})"
                  />
                  <p slot="content">
                    {{item5.commnetContent}}
                    <a-button
                        v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                        @click="removeComment(item5.commentId)"
                        type="danger" size="small" ghost icon="close" shape="circle"/>
                  </p>

<!--            六级-->
                  <a-comment v-for="item6 in item.children ? item5.children : []" :key="item6.commentId">
                    <span slot="actions" @click="showCommentModal('repeat',item6)">回复他</span>
                    <a slot="author"
                       @click="$router.push({name: 'userinfo',params:{userId:$encry(item6.wuser ? item6.wuser.userId : '')}})"
                    >{{ item6.wuser ? item6.wuser.userName : '' }}</a>
                    <a-avatar
                        slot="avatar"
                        :src="item6.wuser ? item6.wuser.avator : ''"
                        :alt="item6.wuser ? item6.wuser.userName : ''"
                        @click="$router.push({name: 'userinfo',params:{userId:$encry(item6.wuser ? item6.wuser.userId : '')}})"
                    />
                    <p slot="content">
                      {{item6.commnetContent}}
                      <a-button
                          v-if="$store.state.user.loginUser.type !== 3 || $store.state.user.loginUser.userId === item.wuser.userId"
                          @click="removeComment(item6.commentId)"
                          type="danger" size="small" ghost icon="close" shape="circle"/>
                    </p>

                  </a-comment>
                </a-comment>
              </a-comment>
            </a-comment>
          </a-comment>
        </a-comment>
      </div>
    </div>
<!--    评论模态框-->
    <a-modal
        v-model="visible"
        :title="modelText"
        okText="评论"
        okType="primary"
        cancelText="取消"
        @cancel="handleCancel"
        @ok="handleOk">
      <a-textarea v-model="commnetContent" style="resize: none;" :placeholder="commentHolder" :rows="4" />
    </a-modal>
  </div>
</template>

<script>
import encry from '@/utils/encryUtil'
import {addComment, addNiu, getBlogDetail, removeBlog, removeComment} from "@/api/blog";
  export default {
    name: "detail",
    created() {
      this.blogId = encry.decrypt(this.$route.params.blogId)
    },
    data(){
      return {
        blogInfo:{},
        // 博客评论
        modelText:'评论xxx',
        commentHolder:'评论',
        visible: false,
        blogId:undefined,
        commnetContent:'',
        parentCommentId:undefined
      }
    },
    mounted() {
      // 获取博客详情
      this.loadBlogInfo();
    },
    methods:{
      // 展示评论模态框
      showCommentModal(type,record) {
        if (type === 'blog'){
          this.visible = true;
          this.modelText = '评论博客'
          this.commentHolder = '@' + record.userName;
        }else if(type === 'repeat'){
          this.visible = true;
          this.modelText = '回复' + record.wuser.userName;
          this.commentHolder = '@' + record.wuser.userName;
          this.parentCommentId = record.commentId;
        }
      },
      // 确认
      async handleOk(e) {
        const content = this.commnetContent;
        if (content.length == 0 || content == ''){
          this.$message.error('请输入评论内容');
          return;
        }
        const comment = {
          commnetContent: content,
          parentCommentId: this.parentCommentId,
          blogId: Number.parseInt(this.blogId)
        };
        const {code,msg} = await addComment(comment);
        if (code === 200){
          this.$message.success(msg);
          this.visible = false;
          this.commnetContent = '';
          this.loadBlogInfo();
        } else {
          this.$message.error(msg);
        }
      },
      // 取消评论
      handleCancel(e) {
        this.visible = false;
        this.parentCommentId = undefined;
        this.commnetContent = '';
      },
      // 加载博客详情
      async loadBlogInfo(){
        const {code,data,msg} =  await getBlogDetail(this.blogId);
        if (code === 200){
          this.blogInfo = data;
        } else {
          this.$message.error(msg);
        }
      },
      // 给博客点赞
      async addNiu(blogId){
        const { code,msg } = await addNiu(blogId);
        if (code === 200){
          this.loadBlogInfo();
        } else {
          this.$message.error(msg);
        }
      },
      // 查看用户详情
      seeUserInfo(userId){
        this.$router.push({
          name:'userinfo',
          params:{
            userId:this.$encry(userId)
          }
        })
      },
      // 删除评论
      async removeComment(commentId){
        if (commentId){
          const _this = this;
          this.$confirm({
            title: '删除评论',
            content: '真的要删除嘛?',
            okText: '确认',
            okType: 'danger',
            cancelText: '放弃',
            onOk() {
              removeComment(commentId).then(res => {
                const { code,msg } = res;
                if (code === 200){
                  _this.$message.success(msg);
                  _this.loadBlogInfo();
                } else {
                  _this.$message.error(msg);
                }
              }).catch(error => {
                console.log(error);
                _this.$message.error("操作异常");
              })
            },
            onCancel() {
              console.log("取消了删除");
            },
          });
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.all-main{
  width: 100%;
  padding: 10px;
  .user-info{
    margin-bottom: 10px;
    .avator{
      margin-right: 10px;
    }
    .uname{
      font-size: 14px;
      margin-right: 10px;
      font-weight: 600;
    }
  }
  .main-info{
    padding-left: 40px;
    .main-title{
      font-size: 14px;
      font-weight: 600;
      line-height: 30px;
    }
    .main-content{
      font-size: 14px;
      line-height: 30px;
      padding-right: 40px;
    }
    .main-footer{
      height: 30px;
      line-height: 30px;
      font-size: 14px;
    }
  }
}
</style>
